import {defineStore } from 'pinia'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

export const useTabStore = defineStore('tabStore', {
    state: () => {
        // 从 localStorage 获取已保存的状态，如果没有则使用默认值
        const savedTabs = JSON.parse(localStorage.getItem('tabs')) || [{name: '问诊首页', index: '/',}];
        const savedActiveTab = localStorage.getItem('activeTab') || '/';
        
        return {
            tabs: savedTabs,
            activeTab: savedActiveTab,
            clickedRoutes: [] // 存储已经点击过的路由路径
        }
    },
    actions: {
        addTab(route) {
            const existingTab = this.tabs.find(tab => tab.index === route.index);
            if (!existingTab) {
                this.tabs.push(route);
                // 保存到 localStorage
                localStorage.setItem('tabs', JSON.stringify(this.tabs));
            }
            this.activeTab = route.index;
            localStorage.setItem('activeTab', route.index);
        },
        
        switchTab(tabName) {
            this.activeTab = tabName;
            localStorage.setItem('activeTab', tabName);
        },
        
        clearTab() {
            this.tabs = [{name: '问诊首页', index: '/',}];
            this.activeTab = '/';
            this.clickedRoutes = [];
            // 清除 localStorage 中的数据
            localStorage.setItem('tabs', JSON.stringify(this.tabs));
            localStorage.setItem('activeTab', this.activeTab);
        },
        closeOther() {
            // 保留首页和当前激活的标签
            this.tabs = this.tabs.filter(tab => tab.index === this.activeTab || tab.index === '/');
            localStorage.setItem('tabs', JSON.stringify(this.tabs));
            localStorage.setItem('activeTab', this.activeTab);
        },
        // 关闭指定标签
        closeTab(targetIndex) {
            // 如果是首页，不允许关闭
            if (targetIndex === '/') {
                ElMessage.warning('首页不能关闭');
                return;
            }

            const index = this.tabs.findIndex(tab => tab.index === targetIndex);
            if (index === -1) return;

            // 如果关闭的是当前激活的标签，需要激活其他标签
            if (this.activeTab === targetIndex) {
                const newActiveTab = this.tabs[index - 1] || this.tabs[index + 1];
                if (newActiveTab) {
                    this.activeTab = newActiveTab.index;
                }
            }

            this.tabs = this.tabs.filter(tab => tab.index !== targetIndex);
            localStorage.setItem('tabs', JSON.stringify(this.tabs));
            localStorage.setItem('activeTab', this.activeTab);
        },
        // 关闭所有
        closeAll(router) {
            // 保留首页
            this.tabs = this.tabs.filter(tab => tab.index === '/');
            this.activeTab = '/';
            localStorage.setItem('tabs', JSON.stringify(this.tabs));
            localStorage.setItem('activeTab', this.activeTab);
            localStorage.setItem('clickedRoutes', JSON.stringify(this.clickedRoutes));
            
            // 跳转到首页
            if (router) {
                router.push('/');
            }
        },
        addClickedRoute(path) {
            if (!this.clickedRoutes.includes(path)) {
                this.clickedRoutes.push(path);
            }
        },

        // 初始化方法，用于页面刷新时恢复状态
        initializeFromRoute(route) {
            if (route.path !== '/login' && route.path !== '/forgetPassword') {
                // 如果当前路由不在 tabs 中，则添加它
                const existingTab = this.tabs.find(tab => tab.index === route.path);
                if (!existingTab) {
                    this.addTab({
                        name: route.name,
                        index: route.path
                    });
                }
                // 设置当前激活的标签
                this.switchTab(route.path);
            }
        }
    }
});